<template>
    <div class="singerMusicList">
        <el-table
            :data="songList.slice(0, musicCurrentPage * 12)"
            stripe
            style="width: 100%"
            v-loading="loading"
        >
            <el-table-column label="序号" width="170" type="index">
            </el-table-column>
            <el-table-column label="歌曲" width="500">
                <template slot-scope="scope">
                    <div class="table-info">
                        <div class="img-box" @click="myGetSongUrl(scope.row)">
                            <img
                                src="../../assets/images/lazyLoading10.gif"
                                :data-img="scope.row.al.picUrl"
                                class="playImgs"
                            />
                            <div class="hidden-play">
                                <img
                                    src="../../assets/images/btn-play.png"
                                    alt=""
                                />
                            </div>
                        </div>
                        <div class="table-content">
                            <p>{{ scope.row.name }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="歌手">
                <template slot-scope="scope">
                    <span v-for="item in scope.row.ar">
                        {{ item.name }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="专辑" width="300">
                <template slot-scope="scope">
                    {{ scope.row.al.name }}
                </template>
            </el-table-column>
            <el-table-column label="时长">
                <template slot-scope="scope">
                    {{ formatTime(scope.row.dt) }}
                </template>
            </el-table-column>
        </el-table>
        <div class="poll" ref="poll4">
            <img src="../../assets/images/loading2.gif" alt="" />
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { formatTime, debounce, lazyload } from "../../utils/common";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "singerDetails"
);
const {
    mapState: playMapState,
    mapMutations: playMapMutations,
    mapActions: playMapActions,
} = createNamespacedHelpers("playMusicModel");
export default {
    data() {
        return {
            loading: false,
            musicCurrentPage: 1,
        };
    },
    computed: {
        ...mapState(["songList"]),
    },
    created() {
        this.formatTime = formatTime;
        this.lazyLoading = debounce(this.changeCurrentPage, 1000);
        //用于记录用户的滚动方向，用户一滚动，就把滚动后得到的值赋给这个值
        //等于是一个单向锁，防止用户向上滚动的时候也会触发事件
        this.prevY = 0;
        window.addEventListener("scroll", this.lazyLoading);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.lazyLoading);
    },
    methods: {
        ...playMapActions(["getSongUrl"]),
        ...playMapMutations([
            "searchChangeCurrentMusicName",
            "addLoaclStorage",
            "changeTempMusicList",
        ]),
        myGetSongUrl(val) {
            this.getSongUrl(val.id);
            this.searchChangeCurrentMusicName(val);
            this.addLoaclStorage(val);
            this.changeTempMusicList();
        },
        changeCurrentPage(val) {
            let imgs = document.querySelectorAll(".playImgs");
            if (window.scrollY > this.prevY) {
                lazyload(imgs);
                //记录单向锁，防止向上滚动也触发事件
                this.prevY = window.scrollY;
                if (
                    //如果占位符距离顶部的距离小于窗口，就证明这个占位符出现在了用户视野里
                    //就可以发送ajax了
                    this.$refs.poll4.getBoundingClientRect().top <
                    window.innerHeight
                ) {
                    //请求下一页数据
                    this.musicCurrentPage++;
                }
            }
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/singerMusicList";
</style>